<template><!--下周工作，换注册的图形码，将验证成功和失败逻辑换一下，完事后这部分推送。-->
	<view class="page" style=" background-image: url('../../static/background/login.png');">

		<view class="log">
			<image src="../../static/logo/智医.png" mode=""></image>
		</view>
		
		<view class="user" :style= "{display:Islogin? 'flex' : 'none'}">  <!--返回栏-->
			<view class="keys">
				
				<view class="input" :style="{display:IsbindPhone?'none' : 'flex'}">
					<text style="color: white;margin-bottom: 20rpx;">用户名</text>
					<input type="text" v-model="nickname"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="默认为手机号"/>
				</view>
				<view class="input" :style="{display:IsbindPhone?'flex' : 'none'}">
					<text style="color: white; bottom: 20rpx;">手机号</text>
					<view class="bind-phone">
						<input type="safe-password" v-model="phone"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="请输入手机号码" password="true"/>
						<button class="bind-phone-sbmit"   type="primary" @click="SubmitPhoneCode">{{bind_phone_button}}</button>
					</view>
					<input type="safe-password" v-model="PhoneCode"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="手机验证码" password="true"/>	
				
				</view>
				
				<view class="input" >
					<text style="color: white; bottom: 20rpx;">密码</text>
					<input type="safe-password" v-model="password"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="请输入密码" password="true"/>
				</view>
				
				<button type="primary" @click="login">登录</button>
				
			</view>
			<view class="GoRegister" > <text style="color: white;">没有账号，</text><text style="color: dodgerblue;" @click="switchpage">注册</text></view>
			<view class=""><text style="color: dodgerblue;" >忘记密码</text></view>

		</view>
		

		
		<view class="register" :style="{display:Islogin? 'none' : 'flex'}"><!--返回栏-->
			<view class="keys">
				<view class="input" >
					<text style="color: white;margin-bottom: 20rpx;">用户名</text>
					<input type="text" v-model="nickname"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" :placeholder="'默认为手机号'"/>
				</view>
				<view class="input">
					<!--图形验证码 -->
					<view class="captcha">
						<input type="text" name="" v-model="captchaValue">
						<view class="code-img-wrapper" @click="updateImageCode">
						  <canvas  canvas-id="canvas" ></canvas> <!--暴雷，千万不能使用type="2d" 属性-->
						</view>
					</view>
					
				</view>
				<view class="input" >
					<text style="color: white; bottom: 20rpx;">密码</text>
					<input type="safe-password" v-model="password"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="请输入密码" password="true"/>
				</view>
				<view class="input" >
					<text style="color: white; bottom: 20rpx;">再确定密码</text>
					<input type="safe-password" v-model="Repeatpassword" @input="passcheck"  placeholder-style="margin-left:20rpx; color:#d8d8d8; font-size:24rpx" placeholder="请输入密码" password="true"/>
					<text :style="passWarnings">两次密码不一致，请核对！</text>
				</view>	
				
				<button type="primary" @click="register">注册</button>
				
				
			</view>
			
			<view class="GoRegister"> <text style="color: white;">有账号，</text> <text style="color: dodgerblue;" @click="switchpage">去登录</text> </view>
		</view>

		
	</view>
</template>

<script>
	import {Mcaptcha} from "@/utils/Mcaptcha"
	export default {
		// 解释：登录时默认使用手机号或者邮箱 作为用户名nickname字段，当输入手机/邮箱验证码后才可以绑定手机/邮箱作为用户名不代表已经绑定字段
		//所以以手机/邮箱作为用户名不代表已经绑定，要验证码绑定才算。
		data() {
			return {
				Islogin:true,
				option:"email",
				// 全局用户登录/注册都使用此消息
				bind_phone_button:"验证",
					nickname:'',//用户名
					password:'',//密码
					Repeatpassword:'',//再次输入密码
					phone:"", // 注意！！！！！！此处应该是获取用户腾讯手机验证码服务时发送，这是
				PhoneCode:"",//手机验证码
				captchaValue:'',//图形验证码
				captchastate:false,//图形验证码状态
				passWarnings:'display:none',//警告样式,
				IsbindPhone:false //是否绑定了手机号
			}
		},
		onReady() {
		   this.mcaptcha = new Mcaptcha({
		     el: 'canvas',
		     width: 80,
		     height: 35,
		     createCodeImg: ""
		   });
		 },
		methods: {
			
			//切换登录/注册
			switchpage(){
				this.Islogin=!this.Islogin
			},
			// 注册密码核对
			passcheck(){
				if(this.passwor==this.Repeatpassword) this.passWarnings="color：red;font-size:18rpx;height：30rpx;width:200rpx"
				this.passWarnings='display:none'
			},
			// 发送手机验证码
			SubmitPhoneCode(e) {
				// 禁用发送按钮
				e.target.displaydisabled = true;
				uni.request({
					url:"",
					data:{"phone":this.phone},
					method:"GET",
					success: () => {
						// 倒计时60秒
						this.bind_phone_button = 60;
						let countdown = setInterval(() => {
						  this.bind_phone_button--;
						  // 检查倒计时是否结束
						  if (this.bind_phone_button <= 0) {
						    clearInterval(countdown);
						    this.$nextTick(() => {
						      // 倒计时结束，允许用户重新点击按钮
						      e.target.displaydisabled  = false;
						    });
						    this.bind_phone_button = "重新发送";
						  }
						}, 1000);
					},
					fail :(e)=>{
						console.log(e.data)
					}
				})
			  
			},
			// 注册
			register(){
				if (this.password!=this.Repeatpassword) return uni.showToast({title: '两次密码不一致！'})  
				this.submitcaptcha()//验证图形验证码
				uni.request({
					url:"http://127.0.0.1:9099//register",
					data:{
						//用户信息插入
						"user":{"nickname":this.nickname,
								"password":this.password,
								"phone":this.phone
								},
						//手机验证码 只有绑定遇到
						"PhoneCode":this.PhoneCode// 验证码 后续使用这个
						
						},
					method:'POST',
					success: (res) => {  
							if (res.data.code==1){
								return uni.redirectTo({
									url:"/pages/index/index",
									success() {
										// 设置全局登录信息
										uni.showToast({
											title: '注册成功',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'success',
											//显示持续时间为 2秒
											duration: 2000
										})  
									}
								})
							}
							else{
								console.log("注册失败"+res.data.msg)
								let msg=res.data.msg;
								if(msg.includes('ORA-00001')) msg="用户名已经存在"
								uni.showToast({
									title: msg,
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'error',
									//显示持续时间为 2秒
									duration: 2000
								}) 
							}
							
					    }
					
					
				})
			},
			login(){
				if(this.phone!=""){
					console.log("login 为检查全局绑定手机号分支，这里应该是和else医药但加了发送验证码，目前这里没有逻辑")
				}else{
				uni.request({
					url:"http://127.0.0.1:9099/login",
					data:{
						"nickname":this.nickname,
						"password":this.password,
						// 手机号在开发手机号验证时候发送
						},
					method:'POST',
					success: (res) => {
						/*{code: 0||1,
						 data: data:{
							 "token":str,
							 USID:?
							 nickname:str,
							 phone:str,
							email :str,
							birthdays DATE,
							noble:str, -- VIP等级
							query_number:str -- 询问次数
						 }
						}*/
					        console.log(res.data)
							if (res.data.code==1){

								getApp().globalData.token=res.data.data.token ?? null;
								getApp().globalData.USID=res.data.data.USID ?? null;
								getApp().globalData.nickname=res.data.data.nickname ?? null;
								getApp().globalData.email=res.data.data.email ?? null;
								getApp().globalData.birthdays=res.data.data.birthdays ?? null;
								getApp().globalData.noble=res.data.data.noble ?? null;
								getApp().globalData.query_number=res.data.data.query_number ?? null;
								getApp().globalData.picture = res.data.data.picture ?? null;
								console.log("全局变量在登录时候赋值");
								console.log(getApp().globalData);
								//成功
								return uni.redirectTo({
									url:"/pages/index/index",
													success() {
														// 设置全局登录信息
														
														// 设置全局登录信息
														uni.showToast({
															title: '登录成功',
															//将值设置为 success 或者直接不用写icon这个参数
															icon: 'success',
															//显示持续时间为 2秒
															duration: 2000
														})  
													}
								})
							}else{
								console.log("登录失败失败"+res.data.msg)
								return uni.showToast({
									title: '登录失败',
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'error',
									//显示持续时间为 2秒
									duration: 2000
								}) 
							}
							
					    },
						fail(res) {
							// 设置全局登录信息
							uni.showToast({
								title: '登录失败'+res.data.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'fail',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					
					})//uni.request end
				}// else end
				
			},
			/*图形验证码*/
				/* -----------------------------刷新验证码-------------------------------------------*/
				updateImageCode() {
				  this.mcaptcha.refresh();
				},
				// 提交前校验图形验证码
				submitcaptcha() {
				  if(this.captchaValue.length<=0) {
				    return uni.showToast({ title: '图形验证码不可为空' })
				  }
				  let validate = this.mcaptcha.validate(this.captchaValue)
				  if(!validate) {
				    return uni.showToast({ title: '图形验证码错误' })
				  }
				  this.captchastate=true;
				
				}
			
		}
	}
</script>

<style>
.page{
	
	
	height: 1220rpx;
	width: 100%;
	
	/* 让背景图基于容器大小伸缩，确保背景图片覆盖整个元素，同时保持宽高比*/
	background-size: cover; /* 背景图片覆盖整个元素，不重复 */
	background-position: center; /* 背景图片居中显示 */
	background-repeat: no-repeat; /* 确保背景图片不重复 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
.log{
	width: 250rpx;
	height: 250rpx;
	margin-bottom: 50rpx;
}
.log image{
	width: 100%;
	height: 100%;
}
.result{
	width: 100%;
	height: 200rpx;
}
.user{
	
	/*background-color: white;*/
	height: 600rpx;
	width: 600rpx;
	/*flex-grow: 1;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
	

.user .keys{
	margin: 20rpx auto;
	height: 600rpx;
	width: 100%;
	
	
}
.user .keys .input{
	margin: 20rpx auto;
	width:400rpx ;
	display: flex;
	flex-direction: column;
	
}
.bind-phone{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-right: 5rpx;
	/*margin-left: 5rpx;*/
}
.bind-phone-sbmit{
	/*.user .keys .input bind-phone bind-phone-sbmit{手机号}验证按钮*/
	width: 200rpx;
	height:80rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 18rpx;
	
	}
/*图形验证码*/
.captcha{
	width:500rpx;height:150rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.captcha input {
	width: 200rpx;
	height: 100rpx;
}
.captcha .code-img-wrapper{
	max-width: 150rpx;
	max-height: 80rpx;
	background-color: white;
}
.captcha  button{
	width: 130rpx;
	height: 60rpx;
	font-size: 24rpx;
}





.register{
	height: 600rpx;
	width: 600rpx;
	/*flex-grow: 1;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.register .keys{
	margin: 10rpx auto;
	height: 600rpx;
	width: 100%;

	
}
.register .keys .input{
	margin: 10rpx auto;
	width:400rpx ;
	display: flex;
	flex-direction: column;
}
.register .keys .input radio-group{ display: flex; justify-content: center; color: white;}
.register .keys .input radio-group label{margin: auto 20rpx;}

.bottom{
	width: 100%;
	height: 300rpx;
	
}
.GoRegister{
	margin-top: 140rpx;
	display: flex;
	flex-direction: row;
}
input{
	border: 1px solid white;
	border-radius: 30rpx;
	color: white;
	height: 60rpx;
}
.logincode{
	color: dimgrey;/*给验证码的input单独设置color*/
}
button{
	margin: 30rpx auto;
	width: 200rpx;
}
</style>
